<template>
    <div class="main">
        <div>
            <keep-alive :include="['Home', 'Menu']">
                <router-view></router-view>
            </keep-alive>
        </div>


        <!-- 底部导航栏 -->
        <van-tabbar
            v-model="active"
            active-color="#0C34BA"
            inactive-color="#646566"
            route
        >
            <van-tabbar-item
                v-for="(item, index) in tabbarData"
                :key="index"
                :to="{ name: item.routeName }"
            >
                <span>{{ item.title }}</span>
                <template #icon="props">
                    <img
                        :src="
                            props.active ? item.activeIcon : item.inactiveIcon
                        "
                    />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    name: 'Main',

    data() {
        return {
            active: 0,

            //底部导航数据
            tabbarData: [{
                title: '首页',
                activeIcon: require('../assets/home_active.png'),
                inactiveIcon: require('../assets/home.png'),

                //路由名称
                routeName: 'Home'
            },
            {
                title: '菜单',
                activeIcon: require('../assets/menu_active.png'),
                inactiveIcon: require('../assets/menu.png'),
                routeName: 'Menu'
            },
            {
                title: '购物袋',
                activeIcon: require('../assets/shopbag_active.png'),
                inactiveIcon: require('../assets/shopbag.png'),
                routeName: 'Shopbag'
            },
            {
                title: '我的',
                activeIcon: require('../assets/my_active.png'),
                inactiveIcon: require('../assets/my.png'),
                routeName: 'My'
            }
            ]

        }
    },
    methods: {

    }
}
</script>

<style lang="less" scoped>
.box {
    width: 100px;
    height: 100px;
    background-color: #aaa;
}
</style>